import React, { useState, useEffect } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  SettingOutlined,
  LayoutOutlined,
  HomeOutlined,
  AppstoreOutlined,
} from "@ant-design/icons";
import { Button, Layout, Menu, theme } from "antd";
import { Switch, Redirect, Route } from "react-router-dom";

import type { RouteComponentProps } from "react-router-dom";
// 首页
import Home from "./home/home";
// 房源信息
import Housing from "./fangyuan/housing";
// 房源管理
import Housefrm from "./guanli/housefrm";
// 个人设置
import My from "./mine/my";
// 收藏房源
import Collect from "./shoucang/collect";
// 发布房源
import Publish from "./fabu/publish";
// 详情页
import HouseDetail from "./datalis/datalis";
// 用户管理
import User from "./yonghu/user";
// 角色判断
import { isAdmin } from "../api/user";


const { Header, Sider, Content } = Layout;

const Admin: React.FC<RouteComponentProps> = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const [userRole, setUserRole] = useState<'admin' | 'user'>('user');
  const { token: { colorBgContainer, borderRadiusLG } } = theme.useToken();
  
  // 监听角色变化
  useEffect(() => {
    const role = isAdmin() ? 'admin' : 'user';
    setUserRole(role);
    
    // 如果没有登录信息，重定向到登录页
    if (!localStorage.getItem('token')) {
      props.history.push('/login');
    }
  }, [props.history]);

  return (
    <Layout>
      <Sider
        trigger={null}
        style={{ height: "100vh" }}
        collapsible
        collapsed={collapsed}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[props.location.pathname]}
          defaultOpenKeys={["", props.location.pathname]}
          onSelect={(obj) => {
            props.history.push(obj.key);
          }}
          items={userRole === 'admin' ? [
            // 管理员菜单 - 符合图2
            {
              key: "/home",
              icon: <HomeOutlined />,
              label: "首页",
            },
            {
              key: "/user",
              icon: <UserOutlined />,
              label: "用户管理",
            },
            {
              key: "/housefrm",
              icon: <AppstoreOutlined />,
              label: "房屋管理",
            }
          ] : [
            // 普通用户菜单 - 符合图1
            {
              key: "/home",
              icon: <HomeOutlined />,
              label: "首页",
            },
            {
              key: "/housing",
              icon: <UserOutlined />,
              label: "房源信息",
            },
            {
              key: "/housefrm",
              icon: <UserOutlined />,
              label: "房源管理",
            },
            {
              key: "/collect",
              icon: <UserOutlined />,
              label: "收藏房屋",
            },
            {
              key: "/publish",
              icon: <UserOutlined />,
              label: "发布房源",
            },
            {
              key: "/my",
              icon: <SettingOutlined />,
              label: "个人设置",
            }
          ]}
        />
      </Sider>
      <Layout style={{ overflow: "hidden" }}>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: "16px",
              width: 64,
              height: 64,
            }}
          />
          <div style={{ position: 'absolute', top: '6px', right: '30px' }}>
                        <span style={{marginRight:'20px'}}>欢迎登录~{localStorage.getItem('username')||"用户"}</span>
                        <Button
                            color="danger"
                            variant="solid"
                            onClick={() => {
                                localStorage.removeItem('token')
                                props.history.push('/login')
                            }}
                        >
                            退出登录
                        </Button>
                    </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 80,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/housing" component={Housing} />
            <Route path="/housefrm" component={Housefrm} />
            <Route path="/collect" component={Collect} />
            <Route path="/publish" component={Publish} />
            <Route path="/details/:id" component={HouseDetail}/>
            <Route path="/my" component={My} />
            <Route path="/user" component={User} />
            <Redirect from="/" to="/home" />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Admin;
